css flex弹性布局一行三列布局

最新推荐文章于 2024-05-01 23:24:26 发布

Teln_小凯

最新推荐文章于 2024-05-01 23:24:26 发布

阅读量9.4k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq873113580/article/details/122011854

版权

flex弹性布局可以很好的解决浮动布局里面不能垂直居中，和经常由屏幕大小导致的自动换行问题

下面是一个一行三列的布局+水平居中

效果图

HTML代码

核心说明：只要以下3个样式，实现一行3列

display: flex; 让div成为弹性布局

justify-content: space-between; div里面的标签，全部安左中右排列

align-items: center;div里面的表情，垂直居中

<div class="submenu" style="display: flex;justify-content: space-between;align-items: center;padding-top: 15px;padding-bottom: 15px;">
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
                <div class="item">
                    <div><span class="iconfont" style="color: #EC1129;">&#xe7e9;</span></div>
                    <div>压裂监控</div>
                </div>
            </div>